<template>
   <div>//接口测试记录
     <el-row>
       <el-col :span="2">序号</el-col>
       <el-col :span="4">用例名称</el-col>
       <el-col :span="4">开始时间</el-col>
       <el-col :span="4">成功率</el-col>
       <el-col :span="2">耗时</el-col>
       <el-col :span="4">最快响应时间</el-col>
       <el-col :span="4">最慢响应时间</el-col>
     </el-row>
     <div class="contentItemBox">
       <!--内部内容的添加,手风琴做法-->
       <el-collapse v-model="activeNames" v-if="zyShow" @change="selectItem">
         <el-collapse-item :name="index" :key="index" v-for="(items,index) in contentList">
           <template slot="title">
             <el-col :span="5" style="padding-left: 20px">{{items.siaoCodeName}}</el-col>
             <el-col :span="5">{{items.siaoName}}</el-col>
             <el-col :span="4" :offset="9">{{items.siaoType}}</el-col>
           </template>
           <div class="interfaceTitle" style="padding-left: 20px">
             <el-col :span="5">API名称</el-col>
             <el-col :span="5" v-if="optionsValue.indexOf('1')>=0">请求方式</el-col>
             <el-col :span="5" v-if="optionsValue.indexOf('2')>=0">路径</el-col>
             <el-col :span="5" v-if="optionsValue.indexOf('3')>=0">API状态</el-col>
             <el-col :span="4">操作</el-col>
           </div>
           <div class="interfaceContent" style="padding-left: 20px" :key="idx" v-for="(item,idx) in items.children">
             <el-row>
               <el-col :span="5">{{item.siaName}}</el-col>
               <el-col :span="5" v-if="optionsValue.indexOf('1')>=0">{{item.siaHttpMethod}}</el-col>
               <el-col :span="5" v-if="optionsValue.indexOf('2')>=0">{{item.siaPath}}</el-col>
               <el-col :span="5" v-if="optionsValue.indexOf('3')>=0">{{item.siaStatus}}</el-col>
               <el-col :span="4">
                 <div class="opt" @click="doBlack(item,btnItem.btnIndex)" :key="btnIndex" v-for="(btnItem,btnIndex) in zyDataList">
                   <i v-if="btnItem.isIcon"  :class="btnItem.iconName"></i>
                   <span v-else>{{btnItem.name}}</span>
                 </div>
               </el-col>
             </el-row>
           </div>
         </el-collapse-item>
       </el-collapse>
     </div>
     <div class="pageAtion">
       <el-pagination
         @size-change="handleCurrentChange"
         @current-change="handleSizeChange"
         :pager-count="pagerCount"
         :current-page="nowCount1"
         :page-sizes="[10, 20, 30, 40]"
         :page-size="pageSize1"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total1">
       </el-pagination>
     </div>
   </div>
</template>

<script>
  export default{
    props:{
      zySid: {
        type: String,
        required: true
      },
      zyDataList: {
        type: Array,
        required: true
      },
    },
    data(){
      return {
        /*加载刷新*/
        Loading: false,
        /*最大展示分页数*/
        pagerCount: 5,
        /*当前页码*/
        nowCount1: 1,
        /*当前分页尺寸*/
        pageSize1: 10,
        /*分页的总条数*/
        total1: 0,
        /*筛选项*/
        formInline: {
          name: "",
          date: "",
        },
        /*时间节点的选择*/
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }
          ]
        },
        /*高亮的手风琴*/
        activeNames: [],
        /*保存内部的数据组号*/
        oldActiveNames: [],
        /*数据数据组*/
        contentList: [],
        zyShow: true,

        /*当前选择的id*/
        siId: "",

        /*展示内容的筛选*/
        options: [
          {
            value: '1',
            label: '请求方式'
          },
          {
            value: '2',
            label: '路径'
          },
          {
            value: '3',
            label: 'API状态'
          }
        ],
        optionsValue: ['1','2','3']

      }
    },
    mounted(){
      /*代码初始化*/
      this.init()
    },
    methods:{
      /*初始化*/
      init(){
        this.siId = this.zySid;
        this.getNavRight(this.siId)
      },
      /*获取右边的数据*/
      getNavRight(siId){
        this.Loading = true;
        this.axiosGet('/center/owners?pageNum=' + this.nowCount1 + '&pageSize=' + this.pageSize1 + '&siId=' + siId,{},(rsp)=>{
          if(rsp.status){
            this.Loading = false;
            /*进行列表的渲染*/
            this.contentList = rsp.data.list;
            this.total1 = rsp.data.total
          }
        });
      },
      /*手风琴打开时的方法操作*/
      selectItem(array){
        array.forEach((item)=>{
          if(this.oldActiveNames.indexOf(item) === -1){
            /*进行接口数据的查询*/
            this.getChickData(item);
          }
        });
        this.oldActiveNames = array
      },
      /*获取子集的数据*/
      getChickData(index){
        let data  = this.contentList[index];
        this.axiosGet('/center/interfaces?siId=' + data.siId + '&siaoId=' + data.siaoId,{},(rsp)=>{
          /*进行列表的渲染*/
          console.log(rsp);
          data.children = rsp.data.list;
          console.log(data);

          this.$nextTick(()=>{
            this.zyShow = false;
            this.zyShow = true;
          });
        });
      },
      /*分页方法*/
      handleSizeChange(val) {
        /*改变当前页数*/
        this.nowCount1 = 1;
        /*改变分页尺寸*/
        this.pageSize1 = val;
        this.getNavRight(this.siId)
      },
      /*改变当前页数*/
      handleCurrentChange(val) {
        this.nowCount1 = val;
        this.getNavRight(this.siId)
      },
      axiosGet(url,data,callback){
        this.axios.get("api"+url,{params: data}).then((rsp)=>{
          callback(rsp)
        })
      },

      /*子组件返回的方法*/
      doBlack(data,index){
        let obj = {
          data:data,
          fn: index,
        };
        this.$emit('doDataShow',obj);
      }
    },
  }
</script>


<style>

</style>

<style scoped>
  #commonContent{
    width: 100%;
    height: 100%;
    min-height: 700px;
    background-color: #ffffff;
    padding: 10px;
    font-size: 0;
  }

  #commonContent .contentBox{
    display: inline-block;
    vertical-align: top;
  }

  #commonContent .contentBox.right{
    width: 100%;
    height: 100%;
  }

  #commonContent .right .rightHeader{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    border-bottom: 1px solid #EBEEF5;
  }

  #commonContent .right .contentItemBox{
    height: 75%;
    overflow-x: hidden;
  }

  #commonContent .right .contentItemBox .interfaceTitle{
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    border-bottom: solid 1px #CCCCCC;
    background-color: #dee6e9;
  }

  #commonContent .right .contentItemBox .interfaceContent{
    height: 40px;
    line-height: 40px;
    background-color: #dee6e9;
  }

  #commonContent .right .contentItemBox .interfaceContent:hover{
    background-color: #0ba79e;
    color: #FAFAFA;
  }

  #commonContent .right .pageAtion{
    padding: 10px 20px 0 0;
    text-align: right;
  }

  .fontOver{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .opt{
    cursor: pointer;
    margin-right: 10px;
  }
</style>
